<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>4.7节,使用js对表格内容进行分页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="../../extend/animateManage.js"></script>
</head>
<style>
    /*========公共==========*/
    h2,h5,#tooltipMsg,p{
        white-space: nowrap;
    }
    td{
        border: 1px solid #ccc;
        height: 50px;
        text-align: center;
        font-size: 10pt;
        padding: 2px;
    }

</style>
<body>
    <h2>使用js对表格内容进行分页</h2>
    <table id='tablePaging' border="1">
    <tr>
        <td>第1页内容</td>
        <td>第1页内容</td>
    </tr>
    <tr>
        <td>第1页内容</td>
        <td>第1页内容</td>
    </tr>
    </table>
    <p class="paging">
        总页数<span id='allPage'>1</span>
        当前页<span id='currentPage'>1</span>
        <input value='上一页' id='prevPaging' type="button" />
        <input value='下一页' id='nextPaging' type="button" >
    </p>
<script type="text/javascript">
    window.onload = function(){
        /*
         * 如果tr存在则是新增操作，否则为删除操作
         * 当为删除操作的时候，参数 --- table为表格的table对象，num为被删除的单元行序列数
         * 当为新增行操作的时候，参数 ---  table为表格的table对象，num是新增单元行的位置，tr为新增行的单元格的字符串型数组，
         * */
        var
         trAct = function(table, num, tr){

            //如果num不存在则执行删除操作
            if(!tr){
                var _num = table.rows[num];
                //如果被删除的行对象存在，则删除 ，返回true
                if(_num){
                    //js的原生函数删除行
                    table.deleteRow(_num);
                    return true;
                }
                else{
                    //如果删除的对象不存在，则删除失败，返回false
                    return false;
                }
            }
            else{
                //在指定的位置创建行对象
                var r = table.insertRow(num),
                        i = 0,
                //待插入的数据长度
                        l = tr.length;
                //遍历待插入数据
                for(; i < l ; i++){
                    //插入新单元格数据
                    r.insertCell(i).innerHTML = tr[i];
                }

                //新增成功返回 true
                return true;
            }

         },

        //当前的页数
        currentPage = 1,
        //table对象
        table = null,
        //当前页的UI显示
        currentPageUi = null,
        //所有页的UI显示
        allPage = null,
        //更新表格UI
                updateUi = function(){
                    //更新表格的内容Ui
                    tableUi();
                    //设置当前页数
                    currentPageUi.innerHTML = currentPage;
                    //设置总页数
                    allPage.innerHTML = allPages;
                },
        //模拟后端返回的数据结构，以供分页使用
        getPageData = function(){
            return [
                [
                    "第"+currentPage+"页内容",
                    "第"+currentPage+"页内容"
                ],
                [
                    "第"+currentPage+"页内容",
                    "第"+currentPage+"页内容"
                ]

            ]
        },
        //模拟所有页数
        allPages = 5,
        //初始化分页
        tablePaging = function(args){
            table = args.tablePaging;
            currentPageUi = args.currentPage;
            allPage = args.allPage;

            nextPaging(args.nextPaging);
            prevPaging(args.prevPaging);

            updateUi();
        },

        //分页的下一页
        nextPaging = function(e){
            e.onclick = function(){
                currentPage++;
                //如果页数高于最大页，则修改页数为最大页，并阻止程序流
                if(currentPage > allPages){
                    currentPage = allPages;
                    return;
                }
                //更新ui
                updateUi();
            }
        },

        //分页的上一页
        prevPaging = function(e){
            e.onclick = function(){
                currentPage--;
                //如果页数低于1页，则修改页数为1，并阻止程序流
                if(currentPage < 1){
                    currentPage = 1;
                    return;
                }
                //更新ui
                updateUi();
            }
        },
        //更新当前页数的表格数据
        tableUi = function(){
            //返回模拟的后台数据
            var d = getPageData(),
                    _dataI = null,
                    l = d.length,
                    i = 0;

            //清空表格数据，由于数据结构没变，所有清空数据与插入数据都是2
            for(; i < l; i++) {
                //由于节点的动态改变，不断减少，所以删除的节点永远是第一个
                trAct(table, 0);
            }

            //插入表格数据
            for(i = 0; i < l; i++) {
                _dataI = d[i];
                //调用前几一节的API增加td内容
                trAct(table, 0, [
                    _dataI[0],
                    _dataI[1]
                ]);
            }

        };

        //表格分页**********************************************
        tablePaging({
            "tablePaging":document.getElementById("tablePaging"),
            "currentPage":document.getElementById("currentPage"),
            "allPage":document.getElementById("allPage"),
            "nextPaging":document.getElementById("nextPaging"),
            "prevPaging":document.getElementById("prevPaging")
        });
    };
</script>
</body>
</html>